<template>
  <a-input-search v-bind="$attrs" v-if="type === 'search'" :ref="type === 'search' ? 'inputRef' : ''">
    <template v-for="(item, name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData || {}"> </slot>
    </template>
  </a-input-search>
  <a-textarea v-bind="$attrs" v-else-if="type === 'textarea'" :ref="type === 'textarea' ? 'inputRef' : ''" />
  <a-input v-bind="$attrs" :ref="type === 'input' ? 'inputRef' : ''" v-else>
    <template v-for="(item, name) in $slots" #[name]="slotData">
      <!-- $slots是一个对象，v-for遍历对象得到的是对象的值和对象的键 -->
      <slot :name="name" v-bind="slotData || {}"> </slot>
    </template>
  </a-input>
</template>
<script lang="ts">
import { toRefs, reactive, defineComponent } from 'vue'

export default defineComponent({
  name: 'myInput',
  props: {
    //attrs接收的属性是UI组件的API，并不是自定义的传递的属性，所以自定义的属性只能通过
    //这里使用props，相当于一个声明，这里使用之后setup函数中才可以使用props
    type: {
      type: String,
      default: 'input'
    }
  },
  mounted() {
    const entries = Object.entries((this as any).$refs.inputRef)
    // console.log(entries) //
    for (const [key, value] of entries) {
      //每一项为一个数组，数组中的第一个为键，第二个为值
      ;(this as any)[key] = value //将ref的方法绑定到当前的组件是实例
    }
    console.log(this.$refs.inputRef)
  },
  setup(props, { attrs }) {
    const state = reactive({
      value: attrs.modelValue,
      type: props.type
    })
    return {
      ...toRefs(state)
    }
  }
})
</script>
